<template>
  <div class="analytics">
    <h2>{{ t('admin.menu.analytics') }}</h2>
    <p>{{ t('admin.analytics.description') }}</p>
    
    <!-- Analytics charts and reports -->
    <el-row :gutter="20" class="charts-row">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('admin.analytics.salesTrend') }}</span>
            </div>
          </template>
          <div ref="salesChart" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>{{ t('admin.analytics.orderDistribution') }}</span>
            </div>
          </template>
          <div ref="orderChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- Analytics reports -->
    <el-card class="reports-card">
      <template #header>
        <div class="card-header">
          <span>{{ t('admin.analytics.reports') }}</span>
        </div>
      </template>
      <el-table :data="reports" style="width: 100%">
        <el-table-column prop="name" :label="t('admin.analytics.reportName')"></el-table-column>
        <el-table-column prop="date" :label="t('admin.analytics.generatedDate')"></el-table-column>
        <el-table-column :label="t('common.actions')">
          <template #default="scope">
            <el-button size="small" @click="downloadReport(scope.row)">{{ t('admin.analytics.download') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import * as echarts from 'echarts'

export default {
  name: 'AnalyticsDashboard',
  setup() {
    const { t } = useI18n()
    const salesChart = ref(null)
    const orderChart = ref(null)
    let salesChartInstance = null
    let orderChartInstance = null
    
    const reports = ref([
      {
        id: 1,
        name: t('admin.analytics.monthlySalesReport'),
        date: '2025-10-28'
      },
      {
        id: 2,
        name: t('admin.analytics.quarterlyPerformanceReport'),
        date: '2025-10-25'
      },
      {
        id: 3,
        name: t('admin.analytics.annualSummaryReport'),
        date: '2025-10-20'
      }
    ])
    
    const downloadReport = (report) => {
      console.log('Download report:', report)
      // In a real application, you would download the report
      alert(t('admin.analytics.reportDownloaded'))
    }
    
    const initCharts = () => {
      // Initialize sales trend chart
      salesChartInstance = echarts.init(salesChart.value)
      salesChartInstance.setOption({
        title: {
          text: t('admin.analytics.salesTrend')
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130, 140, 120, 160, 180, 200],
          type: 'line',
          smooth: true
        }]
      })
      
      // Initialize order distribution chart
      orderChartInstance = echarts.init(orderChart.value)
      orderChartInstance.setOption({
        title: {
          text: t('admin.analytics.orderDistribution'),
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: t('admin.analytics.completedOrders') },
            { value: 735, name: t('admin.analytics.pendingOrders') },
            { value: 580, name: t('admin.analytics.cancelledOrders') },
            { value: 484, name: t('admin.analytics.processingOrders') }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      })
    }
    
    const resizeCharts = () => {
      if (salesChartInstance) {
        salesChartInstance.resize()
      }
      if (orderChartInstance) {
        orderChartInstance.resize()
      }
    }
    
    onMounted(() => {
      initCharts()
      window.addEventListener('resize', resizeCharts)
    })
    
    return {
      t,
      salesChart,
      orderChart,
      reports,
      downloadReport
    }
  }
}
</script>

<style scoped>
.analytics {
  padding: 20px;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart-container {
  height: 320px;
}

.reports-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>